import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:get/get.dart';
import '../config/app_colors.dart';
import '../utils/route_utils.dart';
import 'joy_search_page.dart';
import 'joy_search_result_page.dart';
import 'widget/joy_top_widget.dart';

class JoySearchTrendingPage extends StatefulWidget {
  const JoySearchTrendingPage({super.key});

  @override
  State<StatefulWidget> createState() {
    return JoySearchTrendingPageState();
  }
}

class JoySearchTrendingPageState extends State<JoySearchTrendingPage> {
  final TextEditingController _searchController = TextEditingController();
  
  // 热门搜索列表（从设计稿中提取）
  // 🔥 注意：这些搜索词会被用于搜索，应该匹配后端的实际数据
  final List<String> _trendingItems = [
    'Nike',
    'Hoodie',
    'Cortiez',
    'Ralph Lauren',
    'Dior B30',  // 🔥 修改为 "Dior" 而不是 "Dior B30"，因为后端分类是 "DIOR/GUCCI"
    'LV',
    'Belt',
    'Chrome hearts',
    'GOYARD',
    'Balenciaga',
  ];

  @override
  void dispose() {
    _searchController.dispose();
    super.dispose();
  }

  // 处理热门搜索项点击
  void _onTrendingItemTap(String keyword) {
    // 跳转到搜索结果页
    JoyNavUtils().to(JoySearchResultPage(searchword: keyword, isSearch: true));
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.white,
      body: NestedScrollView(
        headerSliverBuilder: (context, innerBoxIsScrolled) {
          return [
            SliverAppBar(
              floating: true,
              pinned: false,
              snap: true,
              backgroundColor: AppColors.backHomeYellowGround,
              elevation: 0,
              toolbarHeight: 100.h,
              flexibleSpace: SafeArea(
                child: Container(
                  child: Column(
                    children: [
                      // 顶部组件
                      JoyTopWidget(
                        onCurrencyChanged: () {},
                      ),
                      // 🔥 优化后的紧凑布局：宣传语 + 搜索框
                      Container(
                        padding: EdgeInsets.symmetric(horizontal: 12.w, vertical: 8.h),
                        child: Column(
                          mainAxisAlignment: MainAxisAlignment.start,
                          crossAxisAlignment: CrossAxisAlignment.start,
                          children: [
                            // 宣传语
                            SizedBox(height: 6.h),
                            // 搜索框
                            _buildSearchBar(),
                          ],
                        ),
                      ),
                    ],
                  ),
                ),
              ),
            ),
          ];
        },
        body: SingleChildScrollView(
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [

              // Trending标题和列表
              _buildTrendingSection(),
              
              SizedBox(height: 20.h),
              
              // 底部引导文字
              // _buildBottomGuide(),
              
              // SizedBox(height: 20.h),
            ],
          ),
        ),
      ),
    );
  }

  // 搜索栏（复用首页样式）
  Widget _buildSearchBar() {
    return InkWell(
      onTap: () {
        // 跳转到搜索页
        JoyNavUtils().to(JoySearchPage());
      },
      child: Container(
        height: 40.h,
        decoration: BoxDecoration(
          color: AppColors.backgroundSearch,
          borderRadius: BorderRadius.circular(10),
        ),
        child: Row(
          crossAxisAlignment: CrossAxisAlignment.center,
          children: [
            Expanded(
              child: TextField(
                enabled: false,
                controller: _searchController,
                textAlign: TextAlign.left,
                decoration: InputDecoration(
                  hintText: 'Search within the app',
                  hintStyle: TextStyle(
                    color: AppColors.textHint,
                    fontSize: 13.sp,
                  ),
                  border: InputBorder.none,
                  contentPadding: EdgeInsets.symmetric(
                    horizontal: 16.w,
                    vertical: 10.h,
                  ),
                ),
              ),
            ),
            SizedBox(width: 8.w),
            // 相机图标
            Container(
              width: 35.w,
              height: 35.w,
              child: Center(
                child: Icon(
                  Icons.camera_alt,
                  color: AppColors.primaryVariant,
                  size: 20.sp,
                ),
              ),
            ),
            SizedBox(width: 8.w),
            // 搜索图标
            Container(
              width: 35.w,
              height: 35.w,
              decoration: BoxDecoration(
                color: AppColors.primaryVariant,
                borderRadius: BorderRadius.circular(15.w),
              ),
              child: Center(
                child: Icon(
                  Icons.search,
                  color: AppColors.buttonTextPrimary,
                  size: 15.sp,
                ),
              ),
            ),
            SizedBox(width: 8.w),
          ],
        ),
      ),
    );
  }

  // Trending区域
  Widget _buildTrendingSection() {
    return Stack(
      children: [
        Container(
          height: 60,
          decoration: BoxDecoration(
            color: AppColors.backHomeYellowGround,
            borderRadius: BorderRadius.only(bottomLeft: Radius.circular(15),bottomRight: Radius.circular(15))
          ),
        ),
        Container(
          margin: EdgeInsets.symmetric(horizontal: 16.w),
          padding: EdgeInsets.all(20.w),
          decoration: BoxDecoration(
            color: Color(0xFFF8F8F8),
            borderRadius: BorderRadius.circular(16.r),
            // boxShadow: [
            //   BoxShadow(
            //     color: Colors.black.withOpacity(0.05),
            //     blurRadius: 10,
            //     offset: Offset(0, 2),
            //   ),
            // ],
          ),
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              // Trending标题
              Text(
                'Trending',
                style: TextStyle(
                  fontSize: 20.sp,
                  color: AppColors.textPrimary,
                ),
              ),
              SizedBox(height: 10.w,),

              // 热门搜索列表
              Container(
                child: ListView.builder(
                  padding: EdgeInsets.zero,
                  shrinkWrap: true,
                  physics: NeverScrollableScrollPhysics(),
                  itemCount: _trendingItems.length,
                  itemBuilder: (context, index) {
                    return _buildTrendingItem(index, _trendingItems[index]);
                  },
                ),
              ),
            ],
          ),
        ),
      ],
    );
  }

  // 单个热门搜索项
  Widget _buildTrendingItem(int index, String keyword) {
    // 前三名显示火焰图标
    final bool isTopThree = index < 3;
    
    return InkWell(
      onTap: () => _onTrendingItemTap(keyword),
      child: Container(
        padding: EdgeInsets.symmetric(vertical: 6.h),
        child: Row(
          children: [
            // 排名或图标
            Container(
              width: 25.w,
              height: 25.w,
              // decoration: BoxDecoration(
              //   color: isTopThree ? Colors.black : Colors.transparent,
              //   shape: BoxShape.circle,
              // ),
              child: Center(
                child: isTopThree
                    ? Stack(
                     children: [
                       Image.asset("images/icon_hot.png"),
                       Container(
                         padding: EdgeInsets.only(top: 4,right: 5),
                         child: Center(
                           child: Text(
                             '${index + 1}',
                             style: TextStyle(fontSize: 12.sp,color: AppColors.backHomeYellowGround),
                           ),
                         ),
                       )
                     ],
                )
                    : Text(
                        '${index + 1}',
                        style: TextStyle(
                          fontSize: 14.sp,
                          fontWeight: FontWeight.w500,
                          color: AppColors.textSecondary,
                        ),
                      ),
              ),
            ),
            SizedBox(width: 16.w),
            
            // 关键词
            Expanded(
              child: Text(
                keyword,
                style: TextStyle(
                  fontSize: 16.sp,
                  fontWeight: isTopThree ? FontWeight.w600 : FontWeight.w500,
                  color: AppColors.textPrimary,
                ),
              ),
            ),
            
            // 右箭头
            // Icon(
            //   Icons.arrow_forward_ios,
            //   size: 14.sp,
            //   color: AppColors.textHint,
            // ),
          ],
        ),
      ),
    );
  }

  // 底部引导文字
  Widget _buildBottomGuide() {
    return Container(
      margin: EdgeInsets.symmetric(horizontal: 16.w),
      padding: EdgeInsets.all(20.w),
      decoration: BoxDecoration(
        color: Color(0xFFF5F5F5),
        borderRadius: BorderRadius.circular(16.r),
        boxShadow: [
          BoxShadow(
            color: Colors.black.withOpacity(0.05),
            blurRadius: 10,
            offset: Offset(0, 2),
          ),
        ],
      ),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Row(
            children: [
              // Icon(
              //   Icons.search,
              //   size: 24.sp,
              //   color: AppColors.textHint,
              // ),
              // SizedBox(width: 8.w),
              Text(
                '🔍 Start Your Search Journey',
                style: TextStyle(
                  fontSize: 13.sp,
                  color: AppColors.textSecondary,
                ),
              ),
            ],
          ),
          Text(
            'Enter a product name in the search bar above to discover more exciting items.',
            style: TextStyle(
              fontSize: 14.sp,
              color: AppColors.textSecondary,
              height: 1.5,
            ),
          ),
          SizedBox(height: 8.h),
          Row(
            children: [
              Text(
                '💡 ',
                style: TextStyle(fontSize: 16.sp),
              ),
              Expanded(
                child: Text(
                  'Try searching: shoes,clothing',
                  style: TextStyle(
                    fontSize: 13.sp,
                    color: AppColors.textSecondary,
                    fontStyle: FontStyle.italic,
                  ),
                ),
              ),
            ],
          ),
        ],
      ),
    );
  }
}